import React, { ReactElement, ReactNode } from 'react'
import { Button, Row, Col, Tag, Input } from 'antd'
import Upload from './info/Upload'
import { connect } from 'umi'
import styles from './skin.less'

interface Props {
    skins: Array<any>,
    addSkin: Function,
    delSkin: Function,
    changeSkin: Function
}
function Index({ skins, addSkin, delSkin, changeSkin }: Props): ReactElement {
    return (
        <div>
            <Button onClick={() => {
                addSkin()
            }} type="primary"> + 添加皮肤</Button>
            <div>
                <Row>
                    {
                        skins.map((item, index) => {
                            return <Col key = { index } span={12}>
                                <div className={styles.card}>
                                    <div className={styles.flex}>
                                        <span>
                                            <Tag color="processing">标题{ index + 1}</Tag>
                                        </span>
                                    </div>
                                    <div className={styles.flex}>
                                        <span>
                                            皮肤名称:
                                        </span>
                                        <div>
                                            <Input onChange={(ev) => {
                                                changeSkin(index, "name", ev.target.value)
                                            }}/>
                                        </div>
                                    </div>
                                    <div className={styles.flex}>
                                        <span>
                                            标题:
                                        </span>
                                        <div>
                                            <Upload index = { index } action="skin" />
                                        </div>
                                    </div>
                                    <div className={styles.flex}>
                                        <span>
                                            <Button 
                                                type="primary"
                                                danger
                                                onClick={() => {
                                                    delSkin(index)
                                                }}
                                                >删除皮肤</Button>
                                        </span>
                                    </div>
                                </div>
                            </Col>
                        })
                    }
                </Row>
            </div>
        </div>
    )
}

export default connect((state: any) => {
    console.log(state)
    const { hero } = state
    const { skins } = hero
    return {
        skins
    }
}, (dispatch) => {
    return {
        addSkin() {
            dispatch({ type: "hero/addSkin" })
        },
        delSkin(index: number) {
            dispatch({ type: "hero/delSkin", index })
        },
        changeSkin(index: number, classify: string, value: string) {
            dispatch({ type: "hero/changeSkin", index, classify, value })
        }
    }
})(Index)
